'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends3 = require('babel-runtime/helpers/extends');

var _extends4 = _interopRequireDefault(_extends3);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _collapse = require('antd/lib/collapse');

var _collapse2 = _interopRequireDefault(_collapse);

var _row = require('antd/lib/row');

var _row2 = _interopRequireDefault(_row);

var _col = require('antd/lib/col');

var _col2 = _interopRequireDefault(_col);

var _select = require('antd/lib/select');

var _select2 = _interopRequireDefault(_select);

var _radio = require('antd/lib/radio');

var _radio2 = _interopRequireDefault(_radio);

var _Icon = require('./common/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _AutoComplete = require('./common/AutoComplete');

var _AutoComplete2 = _interopRequireDefault(_AutoComplete);

var _SelectInput = require('./common/SelectInput');

var _SelectInput2 = _interopRequireDefault(_SelectInput);

var _Color = require('./common/Color');

var _Color2 = _interopRequireDefault(_Color);

var _utils = require('../utils');

var _array = require('../array');

var _array2 = _interopRequireDefault(_array);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var Panel = _collapse2['default'].Panel;
var Option = _select2['default'].Option;

var RadioButton = _radio2['default'].Button;
var RadioGroup = _radio2['default'].Group;

var EditorFont = function (_Component) {
    (0, _inherits3['default'])(EditorFont, _Component);
    (0, _createClass3['default'])(EditorFont, null, [{
        key: 'getDerivedStateFromProps',
        value: function getDerivedStateFromProps(props, _ref) {
            var prevProps = _ref.prevProps;

            var nextState = {
                prevProps: props
            };
            if (prevProps && prevProps.value !== props.value) {
                nextState.value = props.value;
            }
            return nextState;
        }
    }]);

    function EditorFont(props) {
        (0, _classCallCheck3['default'])(this, EditorFont);

        var _this = (0, _possibleConstructorReturn3['default'])(this, (EditorFont.__proto__ || Object.getPrototypeOf(EditorFont)).call(this, props));

        _this.onChange = function (key, v, isDrag) {
            var value = (0, _extends4['default'])({}, _this.props.value, (0, _defineProperty3['default'])({}, key, v));
            _this.props.onChange('font', value, isDrag);
        };

        _this.getFontFamily = function () {
            return _this.font.concat(_this.props.font).sort().filter(function (item, pos, ary) {
                return !pos || item !== ary[pos - 1];
            }).map(function (key) {
                return _react2['default'].createElement(
                    Option,
                    { value: key, key: key, style: { fontFamily: key + ', sans-serif' } },
                    key
                );
            });
        };

        _this.getFontAlign = function () {
            var align = _this.props.value.align;
            align = align === 'start' ? 'left' : align;
            align = align === 'end' ? 'right' : align;
            return _react2['default'].createElement(
                RadioGroup,
                {
                    value: align,
                    size: 'small',
                    onChange: function onChange(e) {
                        var target = e.target;
                        _this.onChange('align', target.value);
                    }
                },
                ['left', 'center', 'right', 'justify'].map(function (key) {
                    return _react2['default'].createElement(
                        RadioButton,
                        { value: key, className: _this.props.className + '-align', key: key },
                        _react2['default'].createElement('div', { className: key })
                    );
                })
            );
        };

        _this.getFontDecoration = function () {
            return _react2['default'].createElement(
                RadioGroup,
                { value: _this.props.value.decoration && _this.props.value.decoration.split(' ')[0], size: 'small', onChange: function onChange(e) {
                        var target = e.target;
                        _this.onChange('decoration', target.value);
                    }
                },
                ['none', 'underline', 'line-through', 'overline'].map(function (key) {
                    return _react2['default'].createElement(
                        RadioButton,
                        { value: key, key: key },
                        _react2['default'].createElement(
                            'div',
                            { className: 'decoration', style: { textDecoration: key } },
                            'Aa'
                        )
                    );
                })
            );
        };

        _this.font = ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Georgia', 'Impact', 'Lucida Console', 'MS Serif', 'Palatino Linotype', 'Papyrus', 'Tahoma', 'Times New Roman', 'Helvetica Neue', 'Segoe UI', 'Hiragino Sans GB', 'PingFang SC', 'Microsoft YaHei', 'SimSun', 'SimHei', 'Trebuchet MS', 'Verdana'];
        _this.weight = ['bold', 'lighter', 'normal', '100', '200', '300', '400', '500', '600', '700', '800', '900'];

        _this.state = {
            value: props.value
        };
        return _this;
    }

    (0, _createClass3['default'])(EditorFont, [{
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                value = _props.value,
                locale = _props.locale,
                exclude = _props.exclude,
                props = (0, _objectWithoutProperties3['default'])(_props, ['value', 'locale', 'exclude']);

            ['value', 'font'].map(function (key) {
                return delete props[key];
            });
            return _react2['default'].createElement(
                Panel,
                (0, _extends4['default'])({}, props, { header: props.header || locale.header }),
                !_array2['default'].inArray('family', exclude) && _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(
                            _Icon2['default'],
                            { prompt: locale.font },
                            _react2['default'].createElement(
                                'span',
                                { className: 'icon' },
                                'A'
                            )
                        )
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 21 },
                        _react2['default'].createElement(
                            _SelectInput2['default'],
                            {
                                placeholder: locale.placeholder,
                                style: { width: '100%' },
                                value: value.family,
                                size: 'small',
                                onChange: function onChange(e) {
                                    _this2.onChange('family', e);
                                }
                            },
                            this.getFontFamily()
                        )
                    )
                ),
                !_array2['default'].inArray('size', exclude) && _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: 'font-size', prompt: locale.size })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 9 },
                        _react2['default'].createElement(_AutoComplete2['default'], {
                            style: { width: '100%' },
                            value: value.size,
                            onChange: function onChange(e) {
                                _this2.onChange('size', e);
                            }
                        })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: 'bold', prompt: locale.bold })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 9 },
                        _react2['default'].createElement(
                            _select2['default'],
                            {
                                style: { width: '100%' },
                                value: value.weight,
                                size: 'small',
                                getPopupContainer: function getPopupContainer(node) {
                                    return (0, _utils.getParentNode)(node, 'editor-list');
                                },
                                onChange: function onChange(e) {
                                    _this2.onChange('weight', e);
                                },
                                dropdownMatchSelectWidth: false,
                                dropdownClassName: 'editor-list-dropdown'
                            },
                            (0, _utils.getOptionArray)(this.weight)
                        )
                    )
                ),
                !_array2['default'].inArray('line-height', exclude) && _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: 'line-height', prompt: locale.lineHeight })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 9 },
                        _react2['default'].createElement(_AutoComplete2['default'], {
                            style: { width: '100%' },
                            value: value.lineHeight,
                            onChange: function onChange(e) {
                                _this2.onChange('lineHeight', e);
                            }
                        })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: 'letterSpacing', prompt: locale.letterSpacing })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 9 },
                        _react2['default'].createElement(_AutoComplete2['default'], {
                            style: { width: '100%' },
                            value: value.letterSpacing,
                            onChange: function onChange(e) {
                                _this2.onChange('letterSpacing', e);
                            }
                        })
                    )
                ),
                !_array2['default'].inArray('color', exclude) && _react2['default'].createElement(_Color2['default'], {
                    color: value.color,
                    title: _react2['default'].createElement(_Icon2['default'], { type: 'font-colors', prompt: locale.color }),
                    onChange: function onChange(e, isDrag) {
                        _this2.onChange('color', e, isDrag);
                    }
                }),
                !_array2['default'].inArray('decoration', exclude) && _react2['default'].createElement(
                    _row2['default'],
                    null,
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 21, offset: 3 },
                        this.getFontDecoration()
                    )
                ),
                !_array2['default'].inArray('align', exclude) && _react2['default'].createElement(
                    _row2['default'],
                    null,
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 21, offset: 3 },
                        this.getFontAlign()
                    )
                )
            );
        }
    }]);
    return EditorFont;
}(_react.Component);

EditorFont.propTypes = {
    className: _propTypes2['default'].string,
    header: _propTypes2['default'].string,
    font: _propTypes2['default'].array,
    value: _propTypes2['default'].object,
    onChange: _propTypes2['default'].func,
    locale: _propTypes2['default'].object,
    exclude: _propTypes2['default'].array
};
EditorFont.defaultProps = {
    className: 'editor-font',
    font: [],
    value: {
        family: 'Helvetica Neue',
        size: '1rem',
        weight: 'normal',
        lineHeight: 1.2,
        color: '#000',
        letterSpacing: '0',
        align: 'left',
        decoration: 'none'
    },
    onChange: function onChange() {},
    exclude: []
};


EditorFont.componentName = 'EditorFont';
exports['default'] = EditorFont;
module.exports = exports['default'];